/*
 * @Author: 江舟 jijiangzhou@recycloud.cn
 * @Date: 2024-05-21 14:00:53
 * @LastEditors: 江舟 jijiangzhou@recycloud.cn
 * @LastEditTime: 2024-05-31 15:27:58
 * @FilePath: \vite-project\src\components\common\DateRangerPicker.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Col, DatePicker, Row } from 'antd';
import dayjs from 'dayjs';

const DateRangerPicker: React.FC<{
	value?: string[];
	onChange?: (data: string[]) => void;
}> = ({ value, onChange }) => {
	const [start, end] = value || [];
	const onChnangeStart = (date: dayjs.Dayjs, dateString: string) => {
		const [start, end] = value || [];
		onChange?.([...(dateString ? [dateString] : []), ...(end ? [end] : [])]);
	};
	const onChnangeEnd = (date: dayjs.Dayjs, dateString: string) => {
		const [start, end] = value || [];
		onChange?.([...(start ? [start] : []), ...(dateString ? [dateString?.replace('00:00:00', '23:59:59')] : [])]);
	};
	return (
		<Row gutter={24}>
			<Col span={24} className="flex">
				<DatePicker
					value={start ? dayjs(start) : void 0}
					maxDate={end ? dayjs(end) : void 0}
					onChange={onChnangeStart}
					format="YYYY-MM-DD HH:mm:ss"
					allowClear
					className="w-full flex-1"
					placeholder="请选择开始时间"
				/>
				<div className="text-gray-400 flex text-center justify-center items-center px-10px">至</div>
				<DatePicker
					value={end ? dayjs(end) : void 0}
					minDate={start ? dayjs(start) : void 0}
					onChange={onChnangeEnd}
					format="YYYY-MM-DD HH:mm:ss"
					allowClear
					className="w-full flex-1"
					placeholder="请选择结束时间"
				/>
			</Col>
		</Row>
	);
};

export default DateRangerPicker;
